<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <script src="js/velocity.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="show=!show">显示/隐藏</button>
            <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
                <p v-if="show">文字js动画效果</p>
            </transition>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data : {
                    show : true
                },
                methods:{
                    beforeEnter(el){
                        el.style.opacity = 0;
                        el.style.transformOrigin = 'left';
                        el.style.color = 'red';
                    },
                    enter(el,done) {
                        Velocity(el,{opacity:1,fontSize:'1.4em'},{duration:300});
                        Velocity(el,{fontSize:'1em'},{ complete : done });
                    },
                    leave(el,done){
                        Velocity(el,{translateX:'15px',rotateZ:'50deg'},{duration:300});
                        Velocity(el,{rotateZ:'100deg'},{loop:2});
                        Velocity(el,{rotateZ:'45deg',translateY:'30px',translateX:'30px'},{complete : done });
                    }
                }
            });
        </script>
    </body>
</html>